<template>
  <div class="resetPassword">
    <div class="container">
      <el-steps :active="active" :space="200" finish-status="success"  align-center>
        <el-step title="验证用户名和邮箱" icon="el-icon-edit"></el-step>
        <el-step title="输入验证码" icon="el-icon-s-promotion"></el-step>
        <el-step title="设置新密码" icon="el-icon-key"></el-step>
      </el-steps>
      <div v-if="active === 0" class="common_div">
        <el-form :model="Form" ref="Form" rules="rules1" class="user-container" label-position="left" label-width="80px" size="medium">
          <el-form-item  style="float: right; width: 80%" prop="username" label="用户名">
            <el-input type="text" v-model="Form.username" autofocus ref="username" auto-complete="on"
                      placeholder="请输入用户名" prefix-icon="el-icon-user-solid" spellcheck="true" :disabled="isUsername">
            </el-input>
          </el-form-item>
          <el-form-item style="float: right; width: 80%" prop="email" label="邮箱">
            <el-input type="text" v-model="Form.email" autofocus ref="email" auto-complete="on"
                      placeholder="请输入邮箱" prefix-icon="el-icon-message" spellcheck="true" :disabled="isUsername">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="active === 1" class="common_div">


        <el-form :model="codeForm" ref="codeForm" class="user-container" label-position="left" label-width="80px" size="medium">
          <el-form-item  style="float: right; width: 80%" prop="code" label="验证码">
            <el-input type="text" v-model="codeForm.code" autofocus ref="code" auto-complete="off"
                      placeholder="请输入邮箱验证码" prefix-icon="el-icon-s-promotion" spellcheck="false">

            </el-input>
            <el-button  :disabled="totalTime <60">{{content}}</el-button>
          </el-form-item>

        </el-form>

      </div>
      <div v-if="active === 2" class="common_div">
        <el-form :model="passwordForm"  class="user-container" label-position="left" label-width="80px" size="medium">
          <el-form-item  style="float: right; width: 80%" label="新密码">
            <el-input type="password" v-model="passwordForm.password" autofocus ref="password"
                      auto-complete="off" placeholder="请输入新密码" prefix-icon="el-icon-key" >
            </el-input>

          </el-form-item >
          <el-form-item style="float: right; width: 80%" label="确认密码"  prop="checkPass">
            <el-input type="password" v-model="passwordForm.checkPass" placeholder="确认新密码" prefix-icon="el-icon-key" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div  class="common_div">
        <el-button v-if="active === 1 || active === 0 " type="warning" @click="flash" class="action_button" round>返回</el-button>

        <el-button v-if="active <= 2" @click="next" :disabled="disabled" type="success" class="action_button" style="margin-left: 190px" round>下一步</el-button>
        <router-link to="/login"><el-button v-if="active === 3" @click="next" type="primary" class="action_button" style="margin-left: 60px" round>返回登入</el-button></router-link>
      </div>

    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Retrieve",
  data() {

    return {
      newuserName:'',
      totalTime: 60,
      content: "输入验证码",
      active: 0,
      Form: {
        username: '',
        email: '',
      },
      codeForm: {
        code: '',
        verCode:'!@#$%^',
      },
      passwordForm: {
        password: '',
        checkPass:''
      },
      disabled: false,
      isUsername: false,
    }
  },
  methods:{
    //active = 1 刷新 ， active =  0 ，返回登入；
    flash(){
      if(this.active === 0)
        this.$router.push("/")

      this.$router.go(0)
    },
    next(){
      let flag1 = false;//第一步的是否下一步
      if(this.active === 0){
        if(this.Form.username === ''|| this.Form.email === ''){
          this.$message.warning('用户或邮箱不为空');
        }
        else{
          const data = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
          var  res =  this.Form.email;
          if (!data .test(res)) {
            console.log('错误提示！');
            this.$notify({
              title: '失败',
              message: '邮箱格式错误',
              type: 'warning',
              duration: 5000,
              offset: 100
            });
          }else{
            this.disabled = true;
            const url ="http://localhost:8888/retrieve/" + this.Form.username + "/" + this.Form.email;
            axios.post(url).then(res=>{
              if(res.status === 200){
                if(res.data.result === "success"){
                  //接受验证码
                  this.codeForm.verCode = res.data.verCode;
                  this.$notify({
                    title: '成功',
                    message: '已向'+ this.Form.email + '发送验证码，请在5分钟之内修改密码，否则验证码失效',
                    type: 'success',
                    duration: 5000,
                    offset: 100
                  });
                  this.disabled = false;
                  flag1 = true;
                  // this.active = 1;
                  // if(flag1)
                  this.active = 1;
                  this.newuserName = this.Form.username;
                  if(this.active-1 === 0 && flag1){
                    let clock =  window.setInterval(() => {
                      this.content = this. totalTime + 's后返回上一步';
                      this.totalTime --;
                      if(this. totalTime < 0){
                        this. totalTime = 60;
                        this.content = "输入验证码";
                        window.clearInterval(clock);
                        if(this.active === 1){
                          this.active--;
                        }
                      }
                    }, 1000);
                  }
                }else{
                  this.$notify({
                    title: '失败',
                    message:"用户或email不存在！",
                    type: 'error',
                    duration: 5000,
                    offset: 100,
                  });
                  this.disabled = false;
                }
              }else{
                this.$message.error(res.data.result+",请重新输入");
                this.Form.username= '';
                this.Form.email= '';
              }
            });
            // flag1 = true;
          }
        }
      }
      if(this.active === 1){
        if(this.codeForm.code === ''){
          this.$message.error('验证码不为空');
        }
        else if(this.codeForm.code === this.codeForm.verCode){
          this.active = 2;
        }else{
          this.$message.error('验证码输入错误');
        }
      }
      if(this.active === 2){
        if(this.passwordForm.password === ''){
          this.$message.warning('新密码不为空');
        }else if(this.passwordForm.checkPass !== this.passwordForm.password){
          this.$message.warning('两次密码不一样');
        }else{
          const url ="http://localhost:8888/retrieve/changePass";
          axios.post(
            url,
            {
              name: this.Form.username,
              email:this.Form.email,
              password:this.passwordForm.password
            }
          )
            .then(res=>{
            if(res.status === 200){
              if(res.data.change === "success"){
                this.$notify({
                  title: '成功',
                  message: '该账号密码修改正确！',
                  type: 'success',
                  duration: 5000,
                  offset: 100,
                });
                this.active = 3;
              }
            }
          }).catch(fail=>{})
        }
      }

    },

  }
}
</script>

<style scoped>
.resetPassword{
  background-image: url("#");
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
.container{
  border-radius: 15px;
  background-clip: padding-box;
  margin: 10% auto;
  width: 30%;
  padding: 25px 30px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
  opacity: 0.7;
}
.common_div{

  margin-top: 5%;
}
.user-container {
  width: 80%;
  background: #fff;

}
.action_button {
  width: 20%;
  margin-top: 3%;
  text-align: center;
}
</style>
